<template>
    <MenuPage 
        ref="menuPage"
        :columns="columns" 
        :data="data"
        :total="total"
        :page.sync="query.pageIndex"
        :size.sync="query.pageSize"
        :query="query"
        @add="showEditModal"
        @queryFun="queryList">
        <!-- 创建 / 修改 -->
        <EditModal ref="editModal" :title="pageBtnTxt" @ok="handleOk"></EditModal>
        <DetailModal ref="detailModal"></DetailModal>
    </MenuPage>
</template>
<script>
import EditModal from './edit.vue';
// import ImgView from '@/components/common/img-view';
import DetailModal from './detail.vue'
import { mapGetters, mapState, mapMutations } from 'vuex';
import { queryTemplRelation, delTemplRelation } from '../api/templRelation.js';
import { typeRecordMixin } from '../mixin/research';
import { templMixin } from './mixin'
import pageTitle from '@/mixin/pageTitle';
export default {
    name: 'ResearchList',
    props: {},
    components: { EditModal, DetailModal},
    mixins: [typeRecordMixin,templMixin, pageTitle],
    data() {
        return {
                loading:false,
                query: {
                    pageIndex: 1,
                    pageSize: 10,
                },
                columns: [
                    {
                        title: '名称',
                        key: 'templName',
                        placement: 'top-left',
                        width: 200,
                        tooltip: true,
                        queryForm:{
                            component:'Input'
                        }
                    },
                    {
                        title: '类型',
                        key: 'typeId',
                        placement: 'top-left',
                        width: 200,
                        filter: this.handleTypeRecord,
                        tooltip: true,
                        queryForm:{
                            component:'Select',
                            optionData: () => {
                                return this.typeRecordData;
                            },
                        }
                    },
                    {
                        title: '创建者',
                        key: 'creatorName',
                        width: 200,
                        tooltip: true,
                        queryForm:{
                            component:'Checkbox',
                            text: '由我创建',
                            key: 'creator'
                        }
                    },
                    {
                        type:'html',
                        title: '描述',
                        key: 'description',
                        width: 600
                    },
                    {
                        title:'Topo缩略图',
                        // width: 200,
                        key:'picUrl',
                        placement:'top-right',
                        render:(h,params) => {
                            let dis = !params.row.picUrl || params.row.picUrl.indexOf('files') === -1
                            return h('div',{
                                style:{
                                    'width': '50px',
                                    'height': '28px',
                                    'display': 'flex',
                                    'justify-content':'center',
                                    'align-items': 'center',
                                    'overflow': 'hidden'
                                }
                            },[
                                h('img',{
                                    attrs:{
                                        src:params.row.picUrl
                                    },
                                    style:{
                                        'max-height':dis ? '100%' : '78px',
                                        'cursor':dis ? '' : 'zoom-in'
                                    },
                                    on:{
                                        error:(e) => {
                                            params.row.picUrl = this.defImg
                                            e.target.style.maxHeight = '100%';
                                            e.target.style.cursor = '';
                                            return this.setDefImg(e)
                                        },
                                        click:(e) => {
                                            if(dis || params.row.dis || e.target.style.maxHeight === '100%'){
                                                return
                                            }
                                            this.$refs.detailModal.showModal(e)
                                        }
                                    }
                                })
                            ])
                        }
                    },
                    {
                        title: '操作',
                        placement: 'top-right',
                        key:'action',
                        width:120,
                        opList:[
                            {
                                txt:'修改',
                                disabled: (data) => this.USER_ID != data.creator,
                                fun:this.showEditModal
                            },
                            {
                                txt:'删除',
                                type:'delete',
                                tooltip:true,
                                disabled: (data) => this.USER_ID != data.creator,
                                title: '你确定要删除吗?',
                                fun:this.delItem
                            }
                        ]
                    },
                ],
                data: [],
                total: 0
        };
    },
    computed: {
        ...mapState('user', {
            'USER_ID':state => state.userId,
            'isRootDesigner':state => state.isRootDesigner
        })
    },
    watch: {
        
    },
    created() {
        this.queryTypeRecordAll();
    },
    mounted() {
        this.queryList();
    },
    methods: {
        queryList() {
            let query = { ...this.query };
            if (query.creator) {
                query.creator = this.userId;
            } else {
                delete query.creator;
            }
            queryTemplRelation(query)
                .then(async (res) => {
                    if (res.code == 1) {
                        const data = res.data.items;
                        let pArr = data.map(item => {
                            return this.getTempInfpByID(item.templId).then(data => {
                                item.picUrl = data.picUrl
                            }).catch(() => {
                                item.picUrl = ''
                            })
                        })
                        await Promise.all(pArr);
                        this.data = data;
                        this.total = res.data.total;
                    } else {
                        this.data = [];
                        this.total = 0;
                    }
                })
                .finally(() => {
                    
                });
        },
        refresh() {
            this.query = { pageIndex: 1, pageSize: this.query.pageSize };
            this.queryList()
        },
        handleOk(type) {
            type === 'add' ? this.refresh() : this.queryList();
        },
        delItem(params) {
            delTemplRelation(params.id).then((res) => {
                if (res.code == 1) {
                    this.$Message.info('删除成功!');
                    if (
                        this.data.length == 1 &&
                        this.data.pageIndex > 1
                    ) {
                        this.data.pageIndex--;
                    }
                    this.queryList();
                } else {
                    this.$Message.error(res.message);
                }
            });
        },
        showEditModal(data) {
            this.$refs.editModal.showModal(data);
        },
        showDetailModal(id){
            this.$refs.detailModal.showModal(id);
        }
    },
    beforeDestroy() {},
};
</script>

<style scoped>
.filter-wrap {
    margin-top: 10px;
    font-size: 14px;
    color: #8f90a6;
}
</style>
